<template>
  <div class="table-box">
    <slot name="beforeTable"></slot>
    <!-- 表格 -->
    <div
      class="t-table"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      :element-loading-text="$t('正在加载')"
    >
      <!-- 表格列表 -->
      <div class="table-list">
        <vxe-table
          :data="tableData"
          ref="multipleTable"
          border
          show-overflow
          show-footer-overflow
          :height="tableHeight"
          :sort-config="{ multiple: false }"
          :column-config="{ resizable: true, drag: true }"
          :column-drag-config="{ showIcon: false, trigger: 'cell' }"
          :virtual-y-config="{ enabled: true, gt: 0, mode: 'scroll' }"
          :virtual-x-config="{ enabled: true, gt: 0, oSize: 6 }"
          :cell-config="{ height: 26 }"
          :row-config="{ keyField: rowKey }"
          :checkbox-config="{ reserve: true, checkMethod: selectable, range: true }"
          :keyboard-config="{ isArrow: true, isEnter: true, isTab: true }"
          :mouse-config="{ selected: true }"
          :row-class-name="getRowClass"
          :empty-text="$t('暂无数据')"
          @resizable-change="resizeEvent"
          @column-dragend="dragEndMethod"
          @checkbox-all="selectAll"
          @checkbox-change="select"
          @cell-click="rowClick"
          @sort-change="sortChange"
          @checkbox-range-start="checkboxRangeStartEvent"
          @checkbox-range-end="checkboxRangeEndEvent"
        >
          <vxe-column
            v-if="selection"
            :fixed="selectionRight ? 'right' : 'left'"
            type="checkbox"
            width="46"
          ></vxe-column>
          <template v-for="(item, index) in tableColumnData">
            <vxe-column
              :field="item.key"
              :fixed="allowFixed && index < 3 ? 'left' : ''"
              :align="item.amount ? 'right' : 'left'"
              :title="item.label"
              :width="item.width || 100"
              :key="index"
              :sortable="item.sortable"
              show-overflow
            >
              <template slot="header"><slot name="header" :item="item"></slot></template>
              <template slot-scope="scope">
                <slot
                  v-if="item.custom"
                  :name="item.slotName || item.key"
                  :row="scope.row"
                  :index="scope.$index"
                ></slot>
                <!-- 金额显示千分位 -->
                <template v-else-if="item.amount">
                  {{ scope.row[item.key] === null || scope.row[item.key] == 0 ? '-' : moneyFor(scope.row[item.key]) }}
                </template>
                <template v-else>
                  {{ scope.row[item.key] || '-' }}
                </template>
              </template>
            </vxe-column>
          </template>
        </vxe-table>
      </div>

      <!-- 分页信息 -->
      <template v-if="showPagination">
        <div class="t-pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page.sync="currentPage"
            :page-sizes="pageSizes"
            :page-size="currentSize"
            :pager-count="5"
            :total="total"
            layout="slot, total, prev, pager, next, sizes"
          >
            <span v-if="isFilter" style="color: #3a84fb; margin-right: 8px; margin-top: -1px; font-size: 13px">{{
              $t('筛选')
            }}</span>
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';

import { moneyFor } from '@/utils/tools';

@Component({
  components: {},
})
export default class TableList extends Vue {
  moneyFor = moneyFor; // 显示千分位
  currentPage = 1;
  currentSize = 10;
  // 自定义列
  tableColumnData: any = [];

  @Prop({
    type: Array,
    required: false,
    default: () => [],
  })
  tableData;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  loading;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  isFilter;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  allowFixed;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  selection;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  showIndex;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  selectionAll;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  customColumns;

  @Prop({
    type: Array,
    required: false,
    default: () => [],
  })
  columnData;

  @Prop({
    type: Number,
    required: false,
  })
  maxHeight;

  @Prop({
    type: String,
    required: false,
    default: '',
  })
  actionText;

  @Prop({
    type: String,
    required: false,
    default: 'id',
  })
  rowKey;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  pageChange;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  border;

  @Prop({
    type: Boolean,
    required: false,
    default: true,
  })
  showPagination;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  noText;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  padding;

  @Prop({
    type: Boolean,
    required: false,
    default: false,
  })
  selectionRight;

  @Prop({
    type: Number,
    required: false,
    default: 0,
  })
  total;

  @Prop({
    type: Number,
    required: false,
    default: 5,
  })
  pageSize;

  @Prop({
    type: Number,
    required: false,
    default: 1,
  })
  pageIndex;

  @Prop({
    type: [],
    required: false,
    default: () => [5, 10, 20, 30],
  })
  pageSizes;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  handleSelectionChange;

  @Prop({ default: '' }) getRowClass: any; // 获取行类名

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  rowClick;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  sortChange;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  checkboxRangeStartEvent;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  checkboxRangeEndEvent;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  select;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  selectAll;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  resizeEvent;

  @Prop({
    type: Function,
    required: false,
    default: () => {},
  })
  dragEndMethod;

  @Prop({
    type: Function,
    required: false,
    default: () => [],
  })
  selectedRows;

  @Prop({ default: false }) highlightCurrentRow: any; // 行点击是否保持此行高亮

  @Prop({ default: () => {} }) selectable: any;

  get tableHeight() {
    return this.$store.state.isConcentration ? window.innerHeight - 321 : 600;
  }

  @Watch('columnData')
  initColumns() {
    this.currentSize = this.pageSize;
    this.currentPage = this.pageIndex;
    this.tableColumnData = this.columnData;
  }
  @Watch('pageIndex')
  initPageIndex() {
    this.currentPage = this.pageIndex;
  }
  @Watch('pageSize')
  initPageSize() {
    this.currentSize = this.pageSize;
  }
  mounted() {
    this.initColumns();
  }

  handleSizeChange(val) {
    // 切换条数时，默认回到第一页
    this.currentPage = 1;
    this.pageChange({
      pageSize: val,
      pageIndex: this.currentPage,
    });
  }

  handleCurrentChange(val) {
    this.pageChange({
      pageSize: this.currentSize,
      pageIndex: val,
    });
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
